
<template>
  <div class="rent-contract component actWrap">
    <button-tab v-model="contractTab" class="contractTab">
      <button-tab-item @on-item-click="onItemClick1(1)">待确认</button-tab-item>
      <button-tab-item @on-item-click="onItemClick2(2)">已确认</button-tab-item>
    </button-tab>
    <div>
      <loading :show="loadingShow"></loading>
      <div>
      <!-- 待确认 -->
        <div v-if="contractTab == 0">
          <div v-for="(item,index) in itemList" :key="index">
            <newcontract-List :items=item :status=0 @clickdetails="clickdetails" @getData="getData" ></newcontract-List>
          </div>
        </div>
        <!-- 已确认 -->
        <div v-else>
          <div v-for="(item,index) in itemList" :key="index">
            <newcontract-List :items=item :status=1 @clickdetails="clickdetails" @getData="getData"></newcontract-List>
          </div>
        </div>
        <!-- 合同详情 -->
        <div v-show="showDialog" class="v_show_contract" :class="{'tips-dialog': true}">
          <section class="tips-dialog render__contract__dialog">
            <div class="body" id="contract">
              <!-- <div class="topBack"><span  @click="BackLeft" > &lt; </span>合同详情</div> -->
              <!-- <contract :contractDetail="orderInfo"/> -->
              <div v-html="contractDetail.replace('\r\n', '')"></div>
            </div>
            <div class="btn-close" @click="showDialog = false"></div>
          </section>
        </div>
      </div>
      <!-- 无数据 -->
      <no-data v-if="itemList.length<1"></no-data>
    </div>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Divider, Loading } from 'vux'
// import newcontractList from '@/components/newcontractList'
import newcontractList from '@/views/houseManage/child/newcontractList'
import noData from '@/components/noData'
import contract from '@/components/contract'
export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider,
    Loading,
    newcontractList,
    noData,
    contract
  },
  data () {
    return {
      loadingShow: false,
      contractTab: 0,
      itemList: [],
      contractDetail: '',
      showDialog: false,
      orderInfo: {
        housePersons: {},
        landlord: {},
        order: {},
        render: {},
        apartment: {},
        romm: {},
        renter: {
          mobile: '',
          trueName: ''
        }
      }
    }
  },
  created () {
    this.getData('1')
  },
  // 合同详情点击返回时路由发生跳转时
  beforeRouteLeave (to, from, next) {
    if (this.showDialog) {
      this.showDialog = false
      next('/houseManage/contract')
    } else {
      next()
    }
  },
  methods: {
    // 合同返回
    BackLeft () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      this.showDialog = false
    },
     // 合同详情
    clickdetails (contractId) {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      this.queryOrderDetail4Renter(contractId)
    },
    queryOrderDetail4Renter (contractId) {
      this.contractId = contractId
      this.showDialog = true
      this.$axiosPosting(this.$api.queryNewContractHT, { id: contractId }).then(res => {
        if (res.code === '0000') {
          this.contractDetail = res.data.detail
          console.log(res.data.detail)
        }
      })
    },
    // 待确认
    onItemClick1 (value) {
      this.$vux.loading.show({
        text: 'Loading'
      })
      this.contractTab = 0
      this.getData(value)
    },
    // 已确认
    onItemClick2 (value) {
      this.contractTab = 1
      this.getData(value)
    },
    // 获取列表数据
    getData (status) {
      let id = JSON.parse(localStorage.getItem('userInfo')).id
      this.$axiosPosting(this.$api.queryHouseNewContractUserByType, {
        landlordId: id,
        pageSize: 1000,
        page: 1,
        type: status
      }).then(res => {
        if (res.code === '0000') {
          this.$vux.loading.hide()
          this.msg = ''
          this.itemList = res.data.list
          this.$nextTick(() => {
            this.dataUpdated = true
          })
        } else {
          this.msg = '您还没有合同信息哦~'
          this.itemList = []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#contract .inputlandlords{
  width: 60%;
}
.topBack {
  height: 45px;
  width: 110%;
  background: #007eff;
  text-align: center;
  line-height: 45px;
  position: fixed;
  left: -15px;
  z-index: 2;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  top: 0px;
  span{
    position: absolute;
    top: 0px;
    left: 20px;
    font-size: 25px;
    display: block;
    padding: 0 10px;
  }
}
.v_show_contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  min-height: 100vh;
  height: auto !important;
  overflow-y: auto !important;
  background: white;
}


.tips-dialog .body {
  padding: 0 15px 15px;
}
.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.tips-dialog .weui-dialog, .confirm-refuse .weui-dialog {
  height: 100%;
  overflow: scroll;
  max-width: 100%;
}
.contract__dialog .weui-dialog {
  width: 98vw !important;
}
body .weui-dialog {
  border: 0;
  border-radius: 5px;
}
body .weui-dialog {
  padding-top: 4px;
}
.weui-dialog {
  position: fixed;
  z-index: 5000;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}

.tips-dialog .header {
  padding: 30px 0 20px;
  font-size: 24px;
  line-height: 1;
  color: #000;
}
.tips-dialog .btn-close, .confirm-refuse .btn-close {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  background: url(…Ee3qWPV8omeaghFyn/8Uqn6e2woOm4OndskyOHdw0m/wkwABdM8/yuI42IAAAAAElFTkSuQmCC) no-repeat;
  background-size: 100% 100%;
}
</style>
<style lang="less">

.render__contract__dialog {
  .weui-dialog {
    width: 98vw !important;
    max-width: 100vw!important;
  //  position: absolute;
  //  overflow: auto;
    height: 100%;
    overflow: scroll !important;
    max-width: 100;

  }
}
.vux-button-group{
  padding:0 15px;
}
.vux-button-group > a.vux-button-tab-item-first {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.vux-button-group > a.vux-button-tab-item-last:after {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #d0d0d0;
}
.vux-button-group > a.vux-button-tab-item-last{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.vux-button-group > a.vux-button-tab-item-first:after {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #d0d0d0;
}
</style>

